/*!
 * BEGIN HEADER
 *
 * Contains:        Geometry CSS
 * CVM-Role:        Theme
 * Maintainer:      Hendrik Erz
 * License:         GNU GPL v3
 *
 * Description:     This file contains the main commands and style rules for the
 *                  geometry of the app itself. It sizes and frames the elements
 *                  but does not contain any colours or other styling elements.
 *                  These are located in the theme files.
 *
 *                  The aim of the geometry is that even without any theme all
 *                  elements are positioned correctly. Colouring is the only
 *                  thing that will at that point be missing.
 *
 * END HEADER
 */

* {
  margin: 0;
  box-sizing: border-box;
}

html {
  /* Prevent text selection cursor throughout the app (except CodeMirror) */
  cursor: default;
  /*
   * The base font-size for everything (equals 1rem across the HTML)
   * This can be overridden using the root var --base-font-size
   * We have to set this HERE and NOT in the body, because rem-lengths look
   * up this element, and not the body values.
   */
  font-size: var(--base-font-size, 16px);
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  color: black;

  &.dark {
    color: white;

    a {
      color: rgb(124, 150, 255);
    }
  }

  /* Reset those ugly outlines */
  input, select, textarea, button {
    &:focus {
      outline: 0;
    }
  }

  a {
    color: rgb(60, 88, 201);
  }

  img {
    max-width: 100%;
  }

  /* Fixes the non-readable blue colour of the links and prevents them from breaking out of the container. */
  .tippy-box .tippy-content {
    a {
      color: white;
      word-wrap: break-word;
    }
  }

  .dragger {
    /* This class is applied to dragged elements */
    font-size: 0.9em;
    border-radius: 5px;
    background-color: var(--grey-1);
    padding: 4px;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, .25);
    cursor: default;
  }

  .taglist .tagspacer:only-child .tag {
    border: 2px solid white;
  }
}

/* Make sure that scrollbars look dark or light depending on the app's theme on
non-macOS systems. The colors and general styles have been taken very
professionally from a screenshot of a Windows 10 interface */
body:not(.darwin) {
  ::-webkit-scrollbar { background-color: rgb(228, 228, 228); }
  ::-webkit-scrollbar-thumb { background-color: rgb(172, 172, 172); }

  ::-webkit-scrollbar-button:single-button {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgb(228, 228, 228);
    &:hover { background-color: rgb(200, 200, 200); }
  }

  /* Up */
  ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,33 25,66 75,66'/></svg>"); }
  ::-webkit-scrollbar-button:single-button:vertical:decrement:hover { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,33 25,66 75,66'/></svg>"); }

  /* Down */
  ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='25,33 75,33 50,66'/></svg>"); }
  ::-webkit-scrollbar-button:single-button:vertical:increment:hover { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='25,33 75,33 50,66'/></svg>"); }

  /* Left */
  ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='33,50 66,75 66,25'/></svg>"); }
  ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='33,50 66,75 66,25'/></svg>"); }

  /* Right */
  ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='33,25 33,75 66,50'/></svg>"); }
  ::-webkit-scrollbar-button:single-button:horizontal:increment:hover { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='33,25 33,75 66,50'/></svg>"); }

  &.dark {
    ::-webkit-scrollbar { background-color: rgb(40, 40, 40); }
    ::-webkit-scrollbar-button { background-color: rgb(40, 40, 40); }
    ::-webkit-scrollbar-thumb { background-color: rgb(78, 78, 88); }
    ::-webkit-scrollbar-button:single-button:hover { background-color: rgb(66, 66, 66); }
  }
}

/* The application menu class is basically one menu that is shown both if the
 * custom menubar is shown and a top level item submenu is pulled up, as well as
 * if there is a context menu (as we don't use the remote class to display
 * context menus anymore).
 */

/* HELPER CLASSES */

.dont-break-inside * {
  break-inside: avoid;
}

.inline {
  display: inline-block;
}

.clearfix {
  clear: both;
}
